<template>
  <div class="member-info">
      <div class="container">
          <div class="member-info-title text-overflow">管理所有的下级会员</div>
          <!-- 查询方式 -->
          <div class="filter-box">
              <!-- 手机号查询 -->
              <div class="filter-by-phone">
                <span class="text-overflow">手机号：</span>
                <el-input class="filter-input" clearable v-model="filters.phone"   @keyup.native.enter="queryByStatus(0)" placeholder="手机号码查询"></el-input>
                <!-- <el-button @click="queryByStatus">查询</el-button> -->
              </div>
              <!-- 状态查询 -->
              <div class="filter-by-status">
                 <div class="realname-status">
                    <el-select class="filter-select" @change="queryByStatus(0)" v-model="filters.realnameStatus" clearable placeholder="实名审核状态">
                      <el-option
                        v-for="item in realname_status"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                 </div>
                 <div class="shop-status">
                     <el-select class="filter-select" @change="queryByStatus(0)" v-model="filters.usershopStatus" clearable placeholder="商户审核状态">
                      <el-option
                        v-for="item in shop_status"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                 </div>
              </div>
              <!-- 模糊查询 -->
              <div class="fuzzy-query">
                  <el-button style="width:150px;" @click="queryByStatus(0)">查询</el-button>
                  <!-- <el-input class="filter-input" clearable v-model="filters.fuzzy" placeholder="模糊查询"></el-input>
                  <el-button @click="queryFuzzy">模糊查询</el-button> -->
              </div>
          </div>

          <!-- 列表 -->
          <div class="member-info-list" v-loading="loading" style="width: 100%">
              <div class="member-count">
                 <span>平台注册会员数：</span><span v-html="member_count"></span>
                 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                 <span>已实名会员数：</span><span v-html="realname_count"></span>
              </div>
              <div class="member-list">
                <el-table
                  :data="member_list"
                  style="width: 100%">
                  <el-table-column
                    v-for="cell in member_list_header" :key="cell.prop"
                    :prop="cell.prop"
                    :label="cell.label"
                    :formatter="formatterList"
                    >
                  </el-table-column>
                </el-table>

              </div>
              <div class="pages-control">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pages.currentPage"
                    :page-size="pages.page_size"
                    layout="prev, pager, next, jumper"
                    :total="pages.total">
                  </el-pagination>
              </div>
          </div>

      </div>

     
  </div>
</template>

<script>
import USB from "@/utils/USB.js"; // 获取url


function formatterTime(value) {//value为13位的时间戳
    function add0(m) {
        return m < 10 ? '0' + m : m
    }
    var time = new Date(parseInt(value));
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    return y + '-' + add0(m) + '-' + add0(d);
}
function formatterShop(value){
    if(value == 0){
        return value = "未审核  ❓"
    }
    if(value == 1){
        return value = "已通过  ✅"
    }
    if(value == 2){
        return value = "审核失败❌"
    }
    if(value == 3){
        return value = "未提交  ❗"
    }
}
function formatterRealname(value){
    if(value == 0){
        return value = "未审核  ❓"
    }
    if(value == 1){
        return value = "已通过  ✅"
    }
    if(value == 2){
        return value = "审核失败❌"
    }
    if(value == 3){
        return value = "未提交  ❗"
    }
}
export default {
  name:'member-info',
  data () {
    return {
        loading:false,
        
        member_count:"未查询",
        realname_count:"未查询",
        member_list:[],
        member_list_header:[
          {prop:"createTime",label:"注册日期"},
          {prop:"brandName",label:"品牌名称"},
          {prop:"realname",label:"真实姓名"},
          {prop:"phone",label:"手机号码"},
          {prop:"realnameStatus",label:"实名状态"},
          {prop:"grade",label:"代理等级"},
          {prop:"usershopStatus",label:"商户状态"},
          {prop:"freezeBalance",label:"冻结余额"},
          {prop:"coin",label:"积分"},
          {prop:"rebateSum",label:"总分润"},
          {prop:"withdrawSum",label:"总提现"},
          {prop:"balance",label:"余额"},
        ],
        filters:{
           phone:null,
           realnameStatus:null,
           usershopStatus:null,
           fuzzy:null
        },
        realname_status:[
          {value:0,label:"未审核"},
          {value:1,label:"审核通过"},
          {value:2,label:"审核失败"},
          {value:3,label:"未提交"},
        ],
        shop_status:[
          {value:0,label:"未审核"},
          {value:1,label:"审核通过"},
          {value:2,label:"审核失败"},
          {value:3,label:"未提交"}
        ],
        pages:{
          total:1000,
          page_size:20,
          currentPage:1
        }

    };
  },
  components: {},
  created() {
    this.init();
    this.queryByStatus(0);
  },
  mounted() {},
  methods: {
    queryByStatus(page=0){   
      let token = sessionStorage.getItem(1); 
      let url = `user/afer/${token}`;
      let params = `page=${page}&size=${this.pages.page_size}&roleId=1`;
      ['phone','realnameStatus','usershopStatus'].forEach(element => {
         if(this.filters[element]!== null && this.filters[element]!==''){
            params+=`&${element}=${this.filters[element]}`
         }
      });
      this.loading = true;
      this.$Http.post(url,params).then(res=>{
         this.loading = false;
          if(res.data.resp_code === "000000"){    
              if(res.data.result.length<=0){
                  this.$notify.info({
                    title: '消息',
                    message: "暂无下级会员！"
                  }); 
              }else{
                  this.member_list = res.data.result.content || [];
                  this.pages.total = res.data.result.totalElememts;
              }
          }else{
            this.$notify.info({
              title: '消息',
              message: res.data.resp_message
            }); 
          } 
        }).catch(err=>{
            this.loading = false;
            this.$notify.error({
              title: '错误',
              message: '获取信息失败！'
            });
        });
    },
    queryFuzzy(){
         // 模糊查询
    },
    handleCurrentChange(value){
      this.queryByStatus(value-1);
      // console.log("当前页为：",value);
      // this.loading = true;
      // let params = `page=${value}&size=${this.pages.page_size}`;
      // this.$Http.post(USB.U92,params).then(res=>{
      //   this.loading = false;
      //   if(res.data.resp_code === "000000"){
      //       if(res.data.result.length<=0){
      //           this.$notify.info({
      //             title: '消息',
      //             message: "暂无下级会员！"
      //           }); 
      //       }else{
      //           this.member_list = res.data.result.content;
      //           this.pages.total = res.data.result.totalElememts;
      //       }
      //   }else{
      //     this.$notify.info({
      //       title: '消息',
      //       message: res.data.resp_message
      //     }); 
      //   } 
      // }).catch(err=>{
      //     this.loading = false;
      //     this.$notify.error({
      //       title: '错误',
      //       message: '获取信息失败！'
      //     });
      // });
    },
    init(){
      let token = sessionStorage.getItem(1);
      let url = `user/afer/${token}`;
      let params = `roleId=1&realnameStatus=1&size=1`;
      this.$Http.post(url,params).then(res=>{
       if(res.data.resp_code === "000000"){
          this.realname_count = res.data.result.totalElememts * 28 ;
       } 
      }).catch(err=>{
          this.$notify.error({
            title: '错误',
            message: '获取注册人数信息失败！'
          });
      });

      params = `roleId=1&size=1`;
      this.$Http.post(url,params).then(res=>{
       if(res.data.resp_code === "000000"){
          this.member_count = res.data.result.totalElememts * 58 ;
       } 
      }).catch(err=>{
          this.$notify.error({
            title: '错误',
            message: '获取注册人数信息失败！'
          });
      });

    },
    formatterList(row, column, cellValue, index){
       //  格式化信息
      if(column.label === "注册日期"){
          return formatterTime(cellValue);
      }else if(column.label === "实名状态"){
          return formatterRealname(cellValue)
      }else if(column.label === "代理等级"){
          return "LV."+cellValue;
      }else if(column.label === "商户状态"){
         return formatterShop(cellValue);
      }else{
         return cellValue===null?'--':cellValue;
      }
    }
  }
}

</script>
<style scoped>
.member-info{
    box-sizing: border-box;
    padding: 20px;
}
.container{
  border: 1px solid #ededed;
}
.member-info-title{
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
}
.filter-input,.filter-select{
  width: 160px;
  margin-right: 10px;
}
.filter-box{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.filter-by-status,.fuzzy-query,.filter-by-phone{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
}
.member-count{
  height: 30px;
  text-align: left;
  line-height: 30px;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding: 5px 20px;
}

.member-list{
  min-height: 300px;
  position: relative;
}
.pages-control{
  border-top: 1px solid #ededed;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>